<template>
  <compare-page
    type="energyCompare"
    :queryFormItem="queryFormItem"
    :collapseFormItem="collapseFormItem"
    @workShopName="workShopName"
    @energyPoint="energyPoint"
  />
</template>

<script>
import comparePage from '../components/comparePage.vue'
import mixin from "@/pages/components/mixins/mixin";

export default {
  components: { comparePage },
  mixins: [mixin],
  computed: {
    queryFormItem() {
      return [
        {
          key: "workshop",
          title: {
            "zh-CN": "车间",
            "en-US": "workshop",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.workOptions },
        },
        {
          key: "equipment",
          title: {
            "zh-CN": "设备",
            "en-US": "equipment",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.equipOptions },
        },
        {
          key: "point",
          title: {
            "zh-CN": "点位",
            "en-US": "point",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.pointOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
    collapseFormItem() {
      return [
         {
          key: "workshop",
          title: {
            "zh-CN": "车间",
            "en-US": "workshop",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.workOptions },
        },
        {
          key: "equipment",
          title: {
            "zh-CN": "设备",
            "en-US": "equipment",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.equipOptions },
        },
        {
          key: "point",
          title: {
            "zh-CN": "点位",
            "en-US": "point",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.pointOptions },
        },
         {
           key: "timeRange",
           title: {
             "zh-CN": "时间区间",
             "en-US": "timeRange",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "datetimeRange" },
         },
      ];
    }
  },
  data() {
    return {
      workOptions: [
        { label: '中粗粉车间', value: '中粗粉车间' },
        { label: '超细粉车间', value: '超细粉车间' },
        { label: '气体站', value: '气体站' }
      ],
      equipOptions: [],
      pointOptions: [],
    }
  },
methods: {
    workShopName(val) {
      // 拿到车间名
      let obj = { workshop: val }
      this.$api.Custom.getEquipByWorkShop(obj).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item.values.sf_name,
            value: item.id
          }
        })
        this.equipOptions = arr
      });
    },
    energyPoint(val) {
      this.$api.Custom.energyPoint({equipment: val}).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item.values.sf_energyName,
            value: item.values.point
          }
        });
        this.pointOptions = arr
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
